﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name='robots' content='all, follow' />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>SCIA: Control Integral de Afectaciones</title>
    <link href="public/css/default.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="public/css/style.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="public/css/datePicker.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="public/css/wysiwyg.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="public/css/fancybox-1.3.1.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="public/css/visualize.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="public/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="public/js/jquery.dimensions.min.js"></script>
    <!-- // Tabs // -->
    <script type="text/javascript" src="public/js/ui.core.js"></script>
    <script type="text/javascript" src="public/js/jquery.ui.tabs.min.js"></script>
    <!-- // Tablas y columnas // -->
    <script type="text/javascript" src="public/js/tablednd.js"></script>
    <!-- // Date Picker // -->
    <script type="text/javascript" src="public/js/date.js"></script>
    <!--[if IE]><script type="text/javascript" src="public/js/jquery.bgiframe.js"></script><![endif]-->
    <script type="text/javascript" src="public/js/jquery.datePicker.js"></script>
    <!-- // Editor Wysiwyg // -->
    <script type="text/javascript" src="public/js/jquery.wysiwyg.js"></script>
    <!-- // Graphs // -->
    <script type="text/javascript" src="public/js/jquery.visualize.js"></script>
    <!-- // Fancybox // -->
    <script type="text/javascript" src="public/js/jquery.fancybox-1.3.1.js"></script>
    <!-- // File upload // -->
    <script type="text/javascript" src="public/js/jquery.filestyle.js"></script>
    <script type="text/javascript" src="public/js/init.js"></script>
</head>
<body>
    <div id="main">
        <!-- #header -->
        <div id="header">
            <!-- #logo -->
            <div id="logo">
                <a href="index.html"><span>Control de Obras</span></a>
            </div>
            <!-- /#logo -->
            <!-- #user -->
            <div id="user">
                <h2>
                    Guitarron Primero <span>(admin)</span></h2>
                <a href="">7 mensajes</a> - <a href="">configuración</a> - <a href="index.html">logout</a>
            </div>
            <!-- /#user -->
        </div>
        <!-- /header -->
        <!-- #content -->
        <div id="content">
            <!-- breadcrumbs -->
            <div class="breadcrumbs">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Categoría</a></li>
                    <li><a href="#">Sub Categoría</a></li>
                    <li class="active">Formularios y Tablas</li>
                </ul>
            </div>
            <!-- /breadcrumbs -->
            <!-- buttons -->
            <div class="buttons">
                <ul>
                    <li><a href="#">
                        <img src="public/images/buttons/nuevo.png" alt="" width="32" height="32" />
                        <span>Nuevo</span></a></li>
                    <li><a href="#">
                        <img src="public/images/buttons/actualizar.png" alt="" width="32" height="32" />
                        <span>Editar</span></a></li>
                    <li><a href="#">
                        <img src="public/images/buttons/guardar.png" alt="" width="32" height="32" />
                        <span>Guardar</span></a></li>
                    <li><a href="#">
                        <img src="public/images/buttons/eliminar.png" alt="" width="32" height="32" />
                        <span>Eliminar</span></a></li>
                    <li><a href="#">
                        <img src="public/images/buttons/buscar.png" alt="" width="32" height="32" />
                        <span>Buscar</span></a></li>
                    <li><a href="#">
                        <img src="public/images/buttons/imprimir.png" alt="" width="32" height="32" />
                        <span>Imprimir</span></a></li>
                    <li><a href="#">
                        <img src="public/images/buttons/configuracion.png" alt="" width="32" height="32" />
                        <span>Configurar</span></a></li>
                    <li><a href="#">
                        <img src="public/images/buttons/ayuda.png" alt="" width="32" height="32" />
                        <span>Ayuda</span></a></li>
                </ul>
            </div>
            <!-- /buttons -->
            <!-- box -->
            <div class="box">
                <div class="headlines">
                    <h2>
                        <span>Formularios y Tablas</span></h2>
                </div>
                <div class="box-content">
                    <form class="formBox" method="post" action="">
                    <fieldset>
                        <!-- Correct form message -->
                        <div class="form-message correct">
                            <p>
                                Solicitud aceptada</p>
                        </div>
                        <!-- Warning form message -->
                        <div class="form-message warning">
                            <p>
                                Verifique sus datos</p>
                        </div>
                        <!-- Error form message -->
                        <div class="form-message error">
                            <p>
                                Ha ocurrido un error</p>
                        </div>
                        <div class="form-cols">
                            <!-- two form cols -->
                            <div class="col1">
                                <div class="clearfix">
                                    <div class="lab">
                                        <label for="input-one">
                                            Input a dos columnas <span>*</span></label></div>
                                    <div class="con">
                                        <input type="text" class="input" value="" name="" id="input-one" /></div>
                                </div>
                                <div class="clearfix">
                                    <div class="lab">
                                        <label>
                                            Combo a dos columnas</label></div>
                                    <div class="con">
                                        <select class="select">
                                            <option>Opción 1</option>
                                            <option>Opción 2</option>
                                            <option>Opción 3</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col2">
                                <div class="clearfix error">
                                    <div class="lab">
                                        <label for="input-two">
                                            Input dos columnas <span>*</span></label></div>
                                    <div class="con">
                                        <input type="text" class="input datepicker" value="" name="" id="input-two" /></div>
                                    <!-- // class datepicker switch on jQuery date picker -->
                                </div>
                                <div class="clearfix">
                                    <div class="lab">
                                        <label>
                                            Combo a dos columnas</label></div>
                                    <div class="con">
                                        <select class="select">
                                            <option>Opción 1</option>
                                            <option>Opción 2</option>
                                            <option>Opción 3</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="lab">
                                <label for="input-three">
                                    Input tamaño completo</label></div>
                            <div class="con">
                                <input type="text" class="input" value="" name="" id="input-three" /></div>
                        </div>
                        <div class="clearfix">
                            <div class="lab">
                                <label for="textarea-one">
                                    Textarea</label></div>
                            <div class="con">
                                <textarea cols="" rows="" class="textarea" id="textarea-one"></textarea></div>
                        </div>
                        <div class="clearfix textarea-wysiwyg">
                            <div class="lab">
                                <label for="textarea-two">
                                    Textarea con editor web</label></div>
                            <div class="con">
                                <textarea cols="" rows="" class="textarea wysiwyg" id="textarea-two"></textarea></div>
                        </div>
                        <div class="clearfix file">
                            <div class="lab">
                                <label for="file">
                                    Subir archivo</label></div>
                            <div class="con">
                                <input type="file" name="" class="upload-file" id="file" />
                                <!--<div class="bubble-left"></div>
	              <div class="bubble-inner">JPEG, GIF 5MB max per image</div>
	              <div class="bubble-right"></div>-->
                            </div>
                        </div>
                        <div class="clearfix checkbox">
                            <div class="lab">
                                <label for="check-one">
                                    Checkbox</label></div>
                            <div class="con">
                                <input type="checkbox" name="" id="check-one" /></div>
                        </div>
                        <div class="clearfix checkbox">
                            <div class="lab">
                                <label>
                                    Dos checkboxes</label></div>
                            <div class="con">
                                <label>
                                    <input type="checkbox" name="" />
                                    Checkbox</label>
                                <label>
                                    <input type="checkbox" name="" />Checkbox</label></div>
                        </div>
                        <div class="clearfix checkbox">
                            <div class="lab">
                                <label>
                                    Dos botones de radio</label></div>
                            <div class="con">
                                <label>
                                    <input type="radio" name="" />
                                    Boton radio</label>
                                <label>
                                    <input type="radio" name="" />
                                    Boton radio</label></div>
                        </div>
                        <div class="btn-submit">
                            <!-- Submit form -->
                            <input type="submit" value="Enviar" class="button" />
                            o <a href="" class="cancel">Cancelar</a>
                        </div>
                    </fieldset>
                    </form>
                </div>
                <!-- /box-content -->
            </div>
            <!-- /box -->
            <!-- box -->
            <div class="box">
                <div class="headlines">
                    <h2>
                        <span>Ultimas obras atendidas</span></h2>
                    <a href="#" class="show-filter">Filtrar datos</a>
                </div>
                <!-- Filtrar datos -->
                <div class="filter">
                    <input type="text" value="columna 1" title="columna 1" class="input" />
                    <input type="text" value="columna 2" title="columna 2" class="input" />
                    <input type="text" value="columna 3" title="columna 3" class="input" />
                    <input type="submit" value="Filtrar" class="submit" />
                </div>
                <!-- /Filtrar datos -->
                <!-- table -->
                <table class="tab tab-drag">
                    <tr class="top nodrop nodrag">
                        <th class="dragHandle">
                            &nbsp;
                        </th>
                        <th>
                            Column 2
                        </th>
                        <th>
                            Column 3
                        </th>
                        <th class="action">
                            Acción
                        </th>
                    </tr>
                    <tr>
                        <td class="dragHandle">
                            &nbsp;
                        </td>
                        <td>
                            Datos de la tabla 1
                        </td>
                        <td>
                            Datos de la tabla 1
                        </td>
                        <td class="action">
                            <a href="" class="ico ico-delete">Borrar</a> <a href="" class="ico ico-edit">Editar</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="dragHandle">
                            &nbsp;
                        </td>
                        <td>
                            Datos de la tabla 2
                        </td>
                        <td>
                            Datos de la tabla 2
                        </td>
                        <td class="action">
                            <a href="" class="ico ico-delete">Borrar</a> <a href="" class="ico ico-edit">Editar</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="dragHandle">
                            &nbsp;
                        </td>
                        <td>
                            Datos de la tabla 3
                        </td>
                        <td>
                            Datos de la tabla 3
                        </td>
                        <td class="action">
                            <a href="" class="ico ico-delete">Borrar</a> <a href="" class="ico ico-edit">Editar</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="dragHandle">
                            &nbsp;
                        </td>
                        <td>
                            Datos de la tabla 4
                        </td>
                        <td>
                            Datos de la tabla 4
                        </td>
                        <td class="action">
                            <a href="" class="ico ico-delete">Borrar</a> <a href="" class="ico ico-edit">Editar</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="dragHandle">
                            &nbsp;
                        </td>
                        <td>
                            Datos de la table cinco
                        </td>
                        <td>
                            Datos de la table cinco
                        </td>
                        <td class="action">
                            <a href="" class="ico ico-delete">Borrar</a> <a href="" class="ico ico-edit">Editar</a>
                        </td>
                    </tr>
                </table>
                <!-- /table -->
                <!-- box-action -->
                <div class="tab-action">
                    <select class="select">
                        <option>Selecciona una acción</option>
                        <option>Editar</option>
                        <option>Borrar</option>
                    </select>
                    <input type="submit" value="Aplicar acción" class="submit" />
                </div>
                <!-- /box-action -->
                <!-- /pagination -->
                <div class="pagination">
                    <ul>
                        <li class="graphic first"><a href=""></a></li>
                        <li class="graphic prev"><a href=""></a></li>
                        <li><a href="">1</a></li>
                        <li class="active"><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li class="graphic next"><a href=""></a></li>
                        <li class="graphic last"><a href=""></a></li>
                    </ul>
                    <p>
                        Página 1 de 5</p>
                </div>
                <!-- /pagination -->
            </div>
            <!-- /box -->
        </div>
        <!-- /#content -->
        <!-- #sidebar -->
        <div id="sidebar">
            <!-- mainmenu -->
            <ul id="floatMenu" class="mainmenu">
                <li class="first"><a href="panelcontrol.html">Tablero de Control</a></li>
                <li><a href="#">Usuario</a>
                    <ul class="submenu">
                        <li><a href="#">Opción 1</a></li>
                        <li><a href="#">Opción 2</a></li>
                        <li><a href="#">Opción 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Solicitudes</a></li>
                <li><a href="#">Concentrado</a>
                    <ul class="submenu">
                        <li><a href="#">Opción 1</a></li>
                        <li><a href="#">Opción 2</a></li>
                        <li><a href="#">Opción 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Catálogos</a>
                    <ul class="submenu">
                        <li><a href="#">Opción 1</a></li>
                        <li><a href="#">Opción 2</a></li>
                        <li><a href="#">Opción 3</a></li>
                    </ul>
                </li>
                <li class="last"><a href="#">Administración</a></li>
            </ul>
            <!-- /.mainmenu -->
        </div>
        <!-- /#sidebar -->
        <!-- #footer -->
        <div id="footer">
            <p>
                © 2012 PEMEX Exploración y Producción | <a href="#main">Inicio</a></p>
        </div>
        <!-- /#footer -->
        <!-- MODAL WINDOW -->
        <div id="modal" class="modal-window">
            <h2>
                Example modal window</h2>
            <!-- Warning form message -->
            <div class="form-message warning">
                <p>
                    On the page the following error occurred.</p>
            </div>
            <p>
                Suspendisse et ante vitae turpis vestibulum fermentum nec nec elit. Suspendisse
                ullamcorper lacus in arcu mollis fringilla porta mi placerat. Ut at elit non diam
                tristique scelerisque.
            </p>
        </div>
    </div>
    <!-- /#main -->
</body>
</html>
